<script setup lang='ts'>
import { ref, onBeforeUnmount, inject, onMounted, watch } from "vue";
import { SceneObject } from "xbsj-renderer/dist-node/xr-utils";
import BasicProprties from './propertiesMenu/basicProprties/index.vue';
import CoordinateProprties from './propertiesMenu/coordinateProprties/index.vue';
import GeneralProprties from './propertiesMenu/generalProprties/index.vue';
import LocationProprties from './propertiesMenu/locationProprties/index.vue';
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { XbsjEarthUi } from "../../scripts/xbsjEarthUi"
import { ES3DTileset } from "esobjs-xe2-plugin/dist-node/esobjs-xe2-plugin-main";

const props = withDefaults(defineProps<{
    treeItem: any;
}>(), {
});
const xbsjEarthUi = inject('xbsjEarthUi') as XbsjEarthUi

let propertiesMenu: { name: string, component: string }[] = [];
const currentMenu = ref('GeneralProprties')
const properties = props.treeItem.sceneObject.getESProperties()
const disposer = createVueDisposer(onBeforeUnmount);
const lonLatFormat = toReadonlyVueRef<any>(disposer, [xbsjEarthUi.activeViewer, 'lonLatFormat']);

const propTreeCallback = xbsjEarthUi.propTreeCallback.bind(xbsjEarthUi);
const treeItem = xbsjEarthUi.propSceneTree



const { basic, general, coordinate, dataSource, location, style,defaultMenu } = properties
currentMenu.value=defaultMenu
if (basic.length > 0) {
    propertiesMenu.push({
        name: '基本',
        component: 'BasicProprties',
    })
}
if (general.length > 0) {
    propertiesMenu.push({
        name: '通用',
        component: 'GeneralProprties',
    })
}
if (coordinate.length > 0) {
    propertiesMenu.push({
        name: '坐标',
        component: 'CoordinateProprties',
    })
}
if (dataSource.length > 0) {
    propertiesMenu.push({
        name: '数据源',
        component: 'DataSourceProprties',
    })
}
if (location.length > 0) {
    propertiesMenu.push({
        name: '位置',
        component: 'LocationProprties',
    })
}
if (style.length > 0) {
    propertiesMenu.push({
        name: '样式',
        component: 'StyleProprties',
    })
}
const disabled3DTileset = ref(false)
let aa: any;
const tilesetReady = (sceneObject: ES3DTileset) => {
    sceneObject.tilesetReady.disposableOnce(() => {
        if (sceneObject.supportEdit) {
            disabled3DTileset.value = false
        } else {
            disabled3DTileset.value = true
        }
    })
}
const updateProp = () => {
    if (aa) aa()
    const sceneObject = xbsjEarthUi.propSceneTree.sceneObject
    if (sceneObject instanceof ES3DTileset) {
        if (sceneObject.supportEdit) {
            disabled3DTileset.value = false
        } else {
            disabled3DTileset.value = true
        }
        tilesetReady(sceneObject)
        aa = sceneObject.urlChanged.disposableOn(() => {
            tilesetReady(sceneObject)
        })
    } else {
        disabled3DTileset.value = false
    }
}
onMounted(() => {
    updateProp()
    var dispose = xbsjEarthUi.propSceneTreeChanged.disposableOn((val) => {
        updateProp()
    })
    onBeforeUnmount(() => {
        if (dispose) dispose()
        if (aa) aa()
    })
})

</script>

<template>
    <div class="Property_Panel">
        <div class="Property_header">
            <div class="property_header_item" v-for="item in propertiesMenu" :key="item.component"
                @click="currentMenu = item.component">
                <span class="header_item_span1" :class="currentMenu === item.component ? 'header_active1' : ''">{{
                    item.name
                    }}</span>
            </div>
        </div>
        <div class="Property_content">
            <div v-if="currentMenu === 'BasicProprties'">
                <BasicProprties :properties="basic" :type="treeItem.sceneObject.typeName" :currentMenu="currentMenu"
                    :treeItem="treeItem" @callback="propTreeCallback"></BasicProprties>
            </div>
            <div v-if="currentMenu === 'GeneralProprties'">
                <GeneralProprties :properties="general" @callback="propTreeCallback"
                    :type="treeItem.sceneObject.typeName" :treeItem=treeItem>
                </GeneralProprties>
            </div>
            <div :class="{ 'eS3DTileset_supportEdit1': disabled3DTileset }">
                <div v-if="currentMenu === 'CoordinateProprties'"
                    :class="{ 'eS3DTileset_supportEdit': disabled3DTileset }">
                    <CoordinateProprties :properties="coordinate" @callback="propTreeCallback"
                        :type="treeItem.sceneObject.typeName" :lonLatFormat="lonLatFormat">
                    </CoordinateProprties>
                </div>
            </div>

            <div v-if="currentMenu === 'DataSourceProprties'">
                <CoordinateProprties :properties="dataSource" @callback="propTreeCallback" :lonLatFormat="lonLatFormat">
                </CoordinateProprties>
            </div>
            <div v-if="currentMenu === 'LocationProprties'">
                <LocationProprties :properties="location" @callback="propTreeCallback" :lonLatFormat="lonLatFormat">
                </LocationProprties>
            </div>
            <div v-if="currentMenu === 'StyleProprties'">
                <CoordinateProprties :properties="style"  @callback="propTreeCallback" :lonLatFormat="lonLatFormat"
                    :type="treeItem.sceneObject.typeName" :panel-style="'style'">
                </CoordinateProprties>
            </div>
        </div>
    </div>
</template>

<style scoped>
.Property_Panel {
    width: 100%;
    height: 100%;
    /* background: rgba(71, 71, 71, 0.8); */
    display: flex;
    flex-direction: column;
}

.Property_header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
}

.property_header_item {
    flex: 1;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.property_header_item>span {
    display: inline-block;
    height: 100%;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: rgba(230, 230, 230, 1);
    width: 50px;
}

.header_active1 {
    color: #fff !important;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
}

.property_header_item:hover .header_item_span1 {
    color: #fff;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
}

.Property_content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 5px;
    box-sizing: border-box;

}

.Property_content::-webkit-scrollbar {
    width: 3px;
    background-color: rgba(41, 42, 46, 1);
    border-radius: 2px;
}

.Property_content::-webkit-scrollbar-thumb {
    background-color: rgba(183, 183, 183, 1);
    border-radius: 2px;
}

.eS3DTileset_supportEdit {
    pointer-events: none;
}

.eS3DTileset_supportEdit1 {
    cursor: no-drop;
    background: rgba(77, 77, 77, 0.2);
}
</style>
